<template>
  <div class="common-layout">
    <el-form class="header" :model="queryParam" ref="queryRef" :inline="true">
      <el-form-item label="名称" prop="name">
        <el-input
            v-model="queryParam.name"
            placeholder="请输入任务名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input
            v-model="queryParam.title"
            placeholder="请输入任务标题"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="active">
        <el-select v-model="queryParam.active" placeholder="请选择任务状态" clearable style="width: 200px">
          <el-option
              v-for="dict in task_active_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        <el-button v-if="false" type="success" @click="sendEvent">发送</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="20">
      <el-col :sm="24" :lg="24" style="padding-left: 20px">
        <el-table :data="stepList">
          <el-table-column label="任务编号" width="100" align="center" prop="main">
            <template #default="scope">
              <span v-if="scope.row.end <= parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}') && scope.row.active !== 1"
                    :class="{ 'dynamic-line-through': scope.row.main }">
                {{ scope.row.main }}</span>
              <span v-if="scope.row.active === 1 && scope.row.end >= parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}')"
                    :class="{ 'dynamic-line-complete': scope.row.main }">
                {{ scope.row.main }}</span>
              <span v-if="scope.row.end <= parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}') && scope.row.active === 1"
                    :class="{ 'dynamic-line-complete-outdated': scope.row.main }">
                {{ scope.row.main }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="任务名称" align="center" prop="name">
            <template #default="scope">
              <span v-if="scope.row.end <= parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}') && scope.row.active !== 1"
                    :class="{ 'dynamic-line-through': scope.row.name }">
                {{ scope.row.name }}
              </span>
              <span v-if="scope.row.active === 1 && scope.row.end >= parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}')"
                    :class="{ 'dynamic-line-complete': scope.row.name }">
                {{ scope.row.name }}</span>
              <span v-if="scope.row.end <= parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}') && scope.row.active === 1"
                    :class="{ 'dynamic-line-complete-outdated': scope.row.name }">
                {{ scope.row.name }}
              </span>
            </template>
          </el-table-column>
          <el-table-column v-if="false" label="标题" align="center" prop="title"/>
          <el-table-column label="任务内容" align="center" prop="content">
            <template #default="scope">
              <span v-if="scope.row.end <= parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}')&& scope.row.active !== 1"
                    :class="{ 'dynamic-line-through': scope.row.content }">
                {{ scope.row.content }}
              </span>
              <span v-if="scope.row.end <= parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}') && scope.row.active === 1"
                    :class="{ 'dynamic-line-complete-outdated': scope.row.content }">
                {{ scope.row.content }}
              </span>

              <span v-if="scope.row.active === 1 && scope.row.end >= parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}') "
                    :class="{ 'dynamic-line-complete': scope.row.content }">
                {{ scope.row.content }}</span>
            </template>
          </el-table-column>
          <el-table-column label="限时" width="180" align="center" prop="end">
            <template #default="scope">
              <span v-if="scope.row.end <= parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}') && scope.row.active !== 1"
                    :class="{ 'dynamic-line-through': scope.row.end }">
                {{ scope.row.end }}</span>
              <span v-if="scope.row.active === 1 && scope.row.end >= parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}')"
                    :class="{ 'dynamic-line-complete': scope.row.end }">
                {{ scope.row.end }}</span>
              <span v-if="scope.row.end <= parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}') && scope.row.active === 1"
                    :class="{ 'dynamic-line-complete-outdated': scope.row.end }">
                {{ scope.row.end }}
              </span>
            </template>
          </el-table-column>

          <el-table-column label="最低比率" width="80" align="center" prop="rate">
            <template #default="scope">
              <span v-if="scope.row.end <= parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}') && scope.row.active !== 1"
                    :class="{ 'dynamic-line-through': scope.row.rate }">
                {{ scope.row.rate }}</span>
              <span v-if="scope.row.active === 1 && scope.row.end >= parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}')"
                    :class="{ 'dynamic-line-complete': scope.row.rate }">
                {{ scope.row.rate }}</span>
              <span v-if="scope.row.end <= parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}') && scope.row.active === 1"
                    :class="{ 'dynamic-line-complete-outdated': scope.row.rate }">
                {{ scope.row.rate }}
              </span>
            </template>
          </el-table-column>

          <el-table-column label="创建时间" width="180" align="center" prop="time">
            <template #default="scope">
              <span v-if="scope.row.end <= parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}') && scope.row.active !== 1"
                    :class="{ 'dynamic-line-through': scope.row.time }">
                {{ parseTime(scope.row.time, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              <span v-if="scope.row.active === 1 && scope.row.end >= parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}')"
                    :class="{ 'dynamic-line-complete': scope.row.time }">
                {{ scope.row.time }}</span>
              <span v-if="scope.row.end <= parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}') && scope.row.active === 1"
                    :class="{ 'dynamic-line-complete-outdated': scope.row.time }">
                {{ scope.row.time }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="任务状态" width="120" align="center" prop="active">
            <template #default="scope">
              <dict-tag :options="task_active_status" :value="scope.row.active"/>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="240" class-name="small-padding fixed-width">
            <template #default="scope">

              <el-button
                  link
                  v-if="scope.row.active === 3 || scope.row.active === 5"
                  style="color: #421f7d"
                  @click="startTask(scope.row.id)"
              ><span v-if="scope.row.end <= parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}')"
                     :class="{ 'dynamic-line-through': '接收' }">
                接收
              </span>
                <span v-else>
                  接收
                </span>

              </el-button>

              <el-button
                  link
                  v-if="scope.row.active === 2 && scope.row.type === 2"
                  style="color: #23c6c8"
                  @click="goToStudy(scope.row.content)"
              >跳转
              </el-button>

              <el-button
                  link
                  v-if="scope.row.active === 2 && scope.row.type === 3"
                  style="color: #23c6c8"
                  @click="goToTest(scope.row.content)"
              >跳转
              </el-button>

              <el-button
                  link
                  type="success"
                  v-if="scope.row.active === 6"
                  @click="completeTask(scope.row)"
              >完成
              </el-button>
              <span v-if="scope.row.active === 1 || scope.row.active === 4">无需操作</span>
            </template>
          </el-table-column>
        </el-table>

        <pagination
            style="margin-right: 20px"
            v-show="size > 0"
            :total="size"
            v-model:page="queryParam.pageNum"
            v-model:limit="queryParam.pageSize"
            @pagination="handleQuery"
        />
      </el-col>
    </el-row>

    <el-dialog title="查看步骤" v-model="showDetail" width="1000px" append-to-body>
      <el-table border :data="task_detailList">
        <el-table-column width="60" label="步骤" align="center" prop="step"/>
        <el-table-column label="标题" align="center" prop="title"/>
        <el-table-column label="内容" min-width="240" align="center" prop="content"/>
        <el-table-column label="截止时间" align="center" width="200" prop="time"/>
        <el-table-column label="总步数" width="70" align="center" prop="total"/>
        <el-table-column v-if="false" label="学生" align="center" prop="student"/>
        <el-table-column v-if="false" label="校区" align="center" prop="campus"/>
        <el-table-column v-if="false" label="状态" align="center" prop="status"/>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {
  addStep_progress,
  listStep_progress,
  listTask_detail,
  stepStatus,
  updateStep_progress
} from "@/api/teach/step.js";
import router from "@/router/index.js";
import {parseTime} from "@/utils/ruoyi.js";

const {proxy} = getCurrentInstance()

let queryParam = ref({
  pageNum: 1,
  pageSize: 10
})
let queryDetails = ref({
  main: undefined
})

const {task_active_status} = proxy.useDict("task_active_status")

const active = ref(0)
let stepList = ref([])
let task_detailList = ref([])
let size = ref(0)
let showDetail = ref(false)
let showSteps = ref(false)
let rules = ref({})

// const eventStore = useEventStore();

initPage()

function initPage() {
  handleQuery()
}

function goToStudy(data) {
  // console.log(data)
  if (data.indexOf("组号") !== -1){
    proxy.$modal.msgWarning("请自行前往相应菜单")
    return
  }
  let query = getQueryData(data);
  const route = router.resolve({
    path: '/task/todo-study',
    query: query
  })
  window.open(route.href, '_blank')
}

function getQueryData(data) {
  // console.log(data)
  if (data.toString().indexOf('-') === -1) {
    return {
      unit: 'unit1',
      book: 'book1',
    };
  }
  let index = data.toString().indexOf('-');
  let message = data.substring(index + 1, data.length);
  let book = message.substring(0, message.indexOf(','))
  let unit = message.substring(message.indexOf('-') + 1, message.length)
  return {
    unit: unit.replace(/['"]/g, ''),
    book: book.replace(/['"]/g, '')
  };
}

function goToTest(data) {
  let query = getQueryData(data);

  query.times = 1
  const route = router.resolve({
    path: '/task/todo-test',
    query: query
  })
  // console.log(query)
  window.open(route.href, '_blank')
}

function startTask(id) {
  let startForm = {
    id: id,
    active: 2,
  }
  updateStep_progress(startForm).then(response => {
    if (response.code === 200) {
      proxy.$modal.msgSuccess("接收成功")
      handleQuery()
    }
  })
}

function completeTask(row) {
  // console.log(row)
  let completeForm = {
    id: row.id,
    active: 1,
  }
  updateStep_progress(completeForm).then(response => {
    if (response.code === 200) {
      proxy.$modal.msgSuccess("任务已完成")
      handleQuery()
      // console.log(nextQuery)
    }
  })
}

function sendEvent() {
  // const asyncData = { user: 'Alice', timestamp: Date.now() };
  // console.log('发送异步事件:');
  // eventBus.emit('complete', { message: 'Hello from component!',timestamp: Date.now() });
  // proxy.$modal.msgSuccess("事件已发送")
  // eventBus.emit('user_complete', asyncData);
  // return sendEventVal;
  // eventStore.triggerEvent({ message: 'Hello from Pinia!' });
}

function resetQuery() {
  queryParam.value = {}
  initPage()
}

function handleQuery() {
  // getMyListAll().then(response => {
  //   // console.log(response)
  //   stepList.value = response.data;
  // })
  // console.log(queryParam.value)
  listStep_progress(queryParam.value).then(response => {
    // console.log(response)
    if (response.code === 200) {
      size.value = response.total
      stepList.value = response.rows;
    }
  })
}

</script>

<style scoped lang="scss">
.header {
  margin-top: 20px;
  margin-left: 20px;
}

/* 4. 已过期 */
.dynamic-line-through {
  color: red;
}

/* 4. 动态删除线-已完成 */
.dynamic-line-complete {
  text-decoration: line-through;
}

/* 4. 动态删除线-已过期 */
.dynamic-line-complete-outdated {
  text-decoration: line-through;
  color: red;
}

</style>
